<template>
  <div class="dialog_box">
    <el-dialog v-model="visible" width="570px" :title="title" @closed="onClose">
      <div class="content">
        <div :class="active == 1 ? 'item active' : 'item'" @click="onToggle('personal')">
          <img class="image" src="@/assets/customer/person.png" alt="" />
          <div class="text">{{ typeName[0] }}</div>
        </div>
        <div :class="active == 2 ? 'item active' : 'item'" @click="onToggle('enterprise')">
          <img class="image" src="@/assets/customer/customer.png" alt="" />
          <div class="text">{{ typeName[1] }}</div>
        </div>
      </div>
      <div class="footer">
        <el-checkbox v-model="checked" label="勾选之后，将不再提醒" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, withDefaults, defineProps, defineEmits, watch } from 'vue'
  interface Props {
    typeName: any
  }
  const props = withDefaults(defineProps<Props>(), {
    typeName: () => ['个人客户', '企业客户']
  })
  const emit = defineEmits(['submit'])
  const visible = ref(false)
  const title = ref('选择客户类型')
  const checked = ref(false)
  const active = ref<any>('')
  const onToggle = (v: string) => {
    if (v == 'personal') {
      active.value = 1
      if (checked.value) {
        props.typeName[0] == '个人客户' && localStorage.setItem('', 1)
        props.typeName[0] == '个人线索' && localStorage.setItem('clueType', 1)
      } else {
        props.typeName[0] == '个人客户' && localStorage.removeItem('customerType')
        props.typeName[0] == '个人线索' && localStorage.removeItem('clueType')
      }
    }
    if (v == 'enterprise') {
      active.value = 2
      if (checked.value) {
        props.typeName[1] == '企业客户' && localStorage.setItem('customerType', 2)
        props.typeName[1] == '企业线索' && localStorage.setItem('clueType', 2)
      } else {
        props.typeName[1] == '企业客户' && localStorage.removeItem('customerType')
        props.typeName[1] == '企业线索' && localStorage.removeItem('clueType')
      }
    }
    emit('submit', active.value)
    visible.value = false
  }
  // 弹框关闭回调
  const onClose = () => {
    active.value = ''
    checked.value = false
  }
  watch(visible, (v) => {
    if (v) {
      if (props.typeName[0] == '个人客户') {
        title.value = '选择客户类型'
        // active.value = localStorage.getItem('customerType')
        // localStorage.getItem('customerType') && (checked.value = true)
      }
      if (props.typeName[0] == '个人线索') {
        title.value = '选择线索类型'
        // active.value = localStorage.getItem('clueType')
        // localStorage.getItem('clueType') && (checked.value = true)
      }
    }
  })

  defineExpose({
    visible
  })
</script>

<style scoped lang="scss">
  .dialog_box {
    :deep(.el-dialog) {
      .el-dialog__header {
        font-weight: 500;
        border-bottom: 1px solid #eaeaea;
      }

      .el-dialog__body {
        padding: 25px 78px;
        border-bottom: 1px solid #eaeaea;
        max-height: 271px;

        .content {
          display: flex;
          justify-content: space-between;
          margin-bottom: 37px;

          .item {
            width: 160px;
            height: 138px;
            padding-top: 22px;
            background: #ffffff;
            border: 1px solid #eaeaea;
            border-radius: 4px;
            text-align: center;

            &:hover {
              cursor: pointer;
              border: 1px solid #ff6b00;
            }

            .text {
              font-size: 16px;
              font-weight: 500;
            }
          }

          .active {
            border: 1px solid #ff6b00;
          }

          .image {
            width: 80px;
            height: 80px;
            margin-bottom: 16px;
          }
        }

        .footer {
          text-align: center;
        }
      }
    }
  }
</style>
